<template>
  <div class="buy">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      style="padding-top: 20px"
      title="立即购买"
      left-arrow
      @click-left="$router.back()"
    >
      <template #left>
        <img
          src="http://imooc.hybrid.lgdsunday.club/img/back.b6cb4d8f.svg"
          style="width: 30px"
        />
      </template>
    </van-nav-bar>
    <!-- 商品信息 -->
    <van-card class="info" :title="info.name" :thumb="info.img">
      <template #price>
        <span class="title">￥{{ info.price }}</span>
      </template>
    </van-card>
    <!-- 支付 -->
    <van-form class="radio">
      <van-field name="radio" style="margin-top: 10px">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <div class="bbb">
              <img
                src="http://imooc.hybrid.lgdsunday.club/img/alipay.608c5312.svg"
                class="imge"
              />
              <div>
                <p>支付宝支付</p>
                <p style="color: #a599a5">数亿用户都在用，安全可托付</p>
              </div>
              <van-radio name="1" class="btn" />
            </div>

            <!-- <van-divider /> -->

            <div class="bbb">
              <img
                src="http://imooc.hybrid.lgdsunday.club/img/weichat.0980c80b.png"
                class="imge"
              />
              <div>
                <p>微信支付</p>
                <p style="color: #a599a5">亿万用户选择，更快更安全</p>
              </div>
              <van-radio name="2" class="btn" />
            </div>
          </van-radio-group>
        </template>
      </van-field>
    </van-form>
    <!-- 按钮 -->
    <van-button type="danger" class="yyy"> 立即购买 </van-button>
  </div>
</template>

<script>
export default {
  name: 'BuyView',
  data() {
    return {
      info: {},
      radio: '1'
    }
  },
  created() {
    this.info = this.$route.params
    console.log(this.$route.params)
  }
}
</script>

<style lang="less" scoped>
p,
.van-field,
.van-radio-group {
  margin: 0;
  padding: 0;
}
.buy {
  width: 100vw;
  height: 100vh;
  background-color: #eeeeee;
  text-align: left;
  .info {
    background-color: #fff;
    .title {
      font-size: 32px;
      color: #d8335b;
    }
  }
  .radio {
    .bbb {
      display: flex;
      justify-content: start;
      align-items: center;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #e5e5e5;
      width: 100%;
      position: relative;
      .imge {
        width: 55px;
        height: 55px;
        margin-right: 20px;
        margin-left: 20px;
      }
      .btn {
        position: absolute;
        right: 0;
      }

      /deep/ .van-radio__icon--checked .van-icon-success {
        background: #d81e06 !important; //被选中时的背景颜色
        border: 0; //边框颜色，直接去掉就可以，或者设为与背景颜色一致
      }
    }
  }
}
.yyy {
  background-color: #d81e06;
  width: 80%;
  border-radius: 45px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
}
</style>
